<template>
  <div class="container">
    <div class="tabs">
      <div class="tabs-box">
        <div class="tabs-item" :class="{active: active === index}" v-for="(item, index) in tabs" :key="index"
             @click="changeActive(index)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="tabs-body" v-if="active === 0">
      <div class="tabs-content">
        <div class="center-title">
          <img src="../../assets/img/nlzx-title-bg.png" alt="">
          <span>大脑能力中心</span>
          <img src="../../assets/img/nlzx-title-bg.png" alt="">
        </div>
        <div class="center-sub-title">Center for brain capacity</div>
        <div class="capacity-box">
          <div class="capacity-left">
            <div class="capacity-menu">
              <div class="capacity-menu-item" :class="{active: menuActive === index}" v-for="(item, index) in menu"
                   :key="item.value" @click="changeMenu('#anchor-'+ index, index)">
                <img class="capacity-menu-item-icon" :src="require(`../../assets/img/home/nlzx-menu-${index + 1}.png`)"
                     alt="">
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div ref="anchorBox"  class="capacity-right" @scroll="scroll">
            <div class="anchor-box">
              <div :id="'anchor-'+ index" :ref="'anchor-'+ index" class="capacity-right-box" v-for="(item, index) in menu" :key="index" @scroll="itemScroll">
                <div class="capacity-right-title">
                  <img class="capacity-right-title-icon" :src="require(`../../assets/img/home/nlzx-menu-${index + 1}.png`)"
                       alt="">
                  <span>{{ item.name }}</span>
                  <!--<span class="capacity-right-title-en">{{ item.enName }}</span>-->
                </div>
                <div class="capacity-right-box-body">
                  <div class="capacity-right-tabs">
                    <template v-for="(subItem, subIndex) in item.children" :key="subIndex">
                      <div class="sub-item" :class="{active: item.active === subIndex, disabled: !subItem.url}" @click="item.active = subIndex">
                        <div class="sub-item-icon">
                          <img :src="subItem.icon" alt="" v-if="subItem.icon">
                          <div class="sub-item-name">{{ subItem.name }}</div>
                        </div>
                      </div>
                    </template>
                  </div>

                  <template v-for="(subItem, subIndex) in item.children" :key="subIndex">
                    <div class="sub-item-content" v-if="item.active === subIndex">
                      <div class="sub-item-content-img">
                        <img :src="subItem.imgUrl" alt="">
                      </div>
                      <div class="sub-item-content-body">
                        <div class="sub-item-content-name">{{subItem.name}}</div>
                        <div class="sub-item-content-desc">{{subItem.desc}}</div>
                        <div class="sub-item-content-more" @click="goOtherPage(subItem.url)">查看详情 →</div>
                      </div>
                    </div>
                  </template>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="tabs-body" v-else-if="active === 1">
      <div class="tabs-content" v-if="!showJr">
        <div class="center-title">
          <img src="../../assets/img/nlzx-title-bg.png" alt="">
          <span>未来影视工厂服务中心</span>
          <img src="../../assets/img/nlzx-title-bg.png" alt="">
        </div>
        <div class="center-sub-title">CIS</div>
        <!--<div class="capacity-box">-->
        <!--  <div class="CIS-box"></div>-->
        <!--</div>-->
        <div class="capacity-box">
          <div class="cy-box">
            <div class="cy-item"
                 :class="{
                   fourth: ((index + 1) % 8) === 4,
                   fifth: ((index + 1) % 8) === 5,
                   eighth: ((index + 1) % 8) === 0,
                   right: index < 3,
                   down: index === 3,
                   left: index > 4 && index < cyList.length,
                 }"
                 v-for="(item, index) in cyList"
                 :key="index"
                 @click="item.onClick"
            >
              <div class="cy-item-bg" @mouseenter="item.showPop = true"  @mouseleave="item.showPop = false">
                <div class="cy-item-round">
                  <div class="cy-item-content">
                    <img :src="item.icon" alt="">
                  </div>
                </div>
                <!--弹框-->
                <div class="pop-box" v-if="item.showPop && item.children.length">
                  <div class="pop-header"><img :src="item.icon" alt=""><span class="pop-header-text">{{ item.name }}</span></div>
                  <div class="pop-body">
                    <div class="menu-box">
                      <div class="menu-item" v-for="(menu, menuIndex) in item.children" :key="menuIndex">
                        {{menu.name}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cy-item-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: "CompetenceCenter",
  components: {},
  data() {
    return {
      active: 0,
      menuActive: 0,
      showJr: false,
      cyList: [
        {
          name: '剧本创作',
          icon: require('../../assets/img/home/nlzx-cylc-icon-1.png'),
          showPop: false,
          children: [
            {
              name: '剧本智能评估'
            },
            {
              name: '剧本智能创作'
            },
            {
              name: '剧本智能拆解'
            },
            {
              name: '小说转剧本'
            },
            {
              name: '版权存证'
            },
          ]
        },
        {
          name: '剧组筹备',
          icon: require('../../assets/img/home/nlzx-cylc-icon-2.png'),
          showPop: false,
          children: [
            {
              name: '横影码申领'
            },
            {
              name: '演员证申领'
            },
            {
              name: '道化服租赁'
            },
            {
              name: '临时证办理'
            },
            {
              name: '居住证申领'
            },
          ]
        },
        {
          name: '影视拍摄',
          icon: require('../../assets/img/home/nlzx-cylc-icon-3.png'),
          showPop: false,
          children: [
            {
              name: '政策直达'
            },
            {
              name: '企业名片'
            },
            {
              name: '融资服务'
            },
            {
              name: '线上咨询'
            },
            {
              name: '企业代理'
            },
            {
              name: '5G智慧导办'
            },
            {
              name: '企业星级评定'
            },
            {
              name: '群演报名'
            },
            {
              name: '演员公会'
            },
            {
              name: '办证中心'
            },
            {
              name: '物资申领'
            },
            {
              name: '勘景申请'
            },
            {
              name: '场景预约'
            },
            {
              name: '财务结算'
            },
          ]
        },
        {
          name: '后期制作',
          icon: require('../../assets/img/home/nlzx-cylc-icon-6.png'),
          showPop: false,
          children: [
            {
              name: '影视制作云'
            },
            {
              name: '影视素材超市'
            },
          ]
        },
        {
          name: '金融服务',
          icon: require('../../assets/img/home/nlzx-cylc-icon-8.png'),
          showPop: false,
          children: [],
          onClick: () => {
            // this.showJr = true
            this.$router.push({
              path: '/home/competence'
            })
          }
        },
        {
          name: '衍生品开发',
          icon: require('../../assets/img/home/nlzx-cylc-icon-7.png'),
          showPop: false,
          children: [
            {
              name: 'IP服务'
            },
            {
              name: '供应链服务'
            },
            {
              name: '设计方向智能分析'
            },
            {
              name: '在线交易'
            },
            {
              name: '需求发布'
            },
            {
              name: '大数据供求匹配'
            },
          ]
        },
        {
          name: '版权分析',
          icon: require('../../assets/img/home/nlzx-cylc-icon-4.png'),
          showPop: false,
          children: [
            {
              name: '版权区块链交易'
            },
          ]
        },
        {
          name: '发行放映',
          icon: require('../../assets/img/home/nlzx-cylc-icon-5.png'),
          showPop: false,
          children: [
            {
              name: '实时数据查询'
            },
            {
              name: '版权侵权监测'
            },
            {
              name: '影视舆情监测'
            },
            {
              name: '影视作品画像'
            },
            {
              name: '作品收入预测'
            },
          ]
        },
      ],
      menu: [
        {
          name: '影视拍摄',
          enName: 'Photograph',
          active: 0,
          value: 0,
          children: [
            {
              name: '剧本智能拆解',
              desc: '根据剧本元素特征对剧本进行拆解，科学制定拍摄计划',
              icon: require('../../assets/img/home/nlzx-ys-icon-1.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-ys-1.jpeg'),
              url: 'http://39.99.180.192:8888/index'
            },
            {
              name: '拍摄成本预测',
              desc: '综合剧本拆解结果、剧组规模、实时拍摄情况等信息，在剧组筹备和拍摄过程中，为剧组匹配群众演员、拍摄场景、供应链配套，实现剧组拍摄成本的预测预估和实时演算。',
              icon: require('../../assets/img/home/nlzx-ys-icon-6.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-ys-6.jpeg'),
              url: 'https://hyt.dongyang.gov.cn/bigscreen/#/assess'
            },
            {
              name: '拍摄演员智选',
              desc: '综合考量人员参演经历、剧本题材与内容、档期安排等因素，智能推荐演员参演',
              icon: require('../../assets/img/home/nlzx-ys-icon-2.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-ys-2.jpeg'),
              url: 'https://hyt.dongyang.gov.cn/manager/demo/actorInfo_role'
            },
            {
              name: '拍摄场景智配',
              desc: '自动匹配数据库中场景及点位信息，形成推荐场景清单和推荐理由',
              icon: require('../../assets/img/home/nlzx-ys-icon-3.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-ys-3.jpeg'),
            },
            {
              name: '收支智能分析',
              desc: '自动调用相关数据和算法规则，对剧组拍摄成本和收支情况进行预测预估',
              icon: require('../../assets/img/home/nlzx-ys-icon-4.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-ys-4.png'),
              url: 'https://hyt.dongyang.gov.cn/crew_board/#/home?cca001=94dd7e657d3441e7aa0f85f5614107bd'
            },
            {
              name: '拍摄风险预警',
              desc: '实时预测剧组拍摄风险，对高风险情况进行预警，方便剧组及时规避拍摄风险',
              icon: require('../../assets/img/home/nlzx-ys-icon-5.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-ys-5.jpeg'),
            }
          ]
        },
        {
          name: '数字内容',
          enName: 'Copyright exchange',
          active: 0,
          value: 1,
          children: [
            {
              name: '版权供需匹配',
              desc: '为IP拥有方、IP代理商智能匹配符合要求的需求方，实现版权的供需智能匹配',
              icon: require('../../assets/img/home/nlzx-bq-icon-1.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-bq-1.png'),
              url: 'https://hengdian.linkzq.com/'
            },
            {
              name: '版权交易预测',
              desc: '根据历年版权交易数据、市场环境等因素预测各类IP的交易量和交易趋势',
              icon: require('../../assets/img/home/nlzx-bq-icon-2.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-bq-2.png'),
              url: 'https://hengdian.linkzq.com/article_home'
            },
            {
              name: '版权侵权监测',
              desc: '对网络版权进行连续、实时的自动监测监控与版权大数据挖掘',
              icon: require('../../assets/img/home/nlzx-jg-icon-1.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-jg-1.png'),
              url: 'https://hengdian.linkzq.com/monitor_home'
            },
            {
              name: '衍生品设计方向智能分析',
              desc: '为IP拥有方、IP代理商、设计团队等提供IP衍生方向建议和市场定位',
              icon: require('../../assets/img/home/nlzx-bq-icon-3.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-bq-3.jpeg'),
            },
            {
              name: '衍生品交易预测',
              desc: '预测各类衍生品的交易量和交易趋势，辅助企业布局市场',
              icon: require('../../assets/img/home/nlzx-bq-icon-4.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-bq-4.jpeg'),
            },
            {
              name: '供应链成本分析预测',
              desc: '预测各类供应链的交易量和交易趋势',
              icon: require('../../assets/img/home/nlzx-bq-icon-5.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-bq-5.png'),
              url: 'https://hyt.dongyang.gov.cn/bigscreen/#/assess'
            }
          ]
        },
        {
          name: '企业服务',
          enName: 'Industrial Services',
          active: 0,
          value: 2,
          children: [
            {
              name: '人才政策智享',
              desc: '梳理服务对象属性标签及人才服务业务事项政策标签，主动感知服务人才需求',
              icon: require('../../assets/img/home/nlzx-cy-icon-1.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-cy-1.png'),
            },
            {
              name: '企业政策直达',
              desc: '主动匹配企业可享受的政策待遇，开展智能消息精准推送和智配直享服务',
              icon: require('../../assets/img/home/nlzx-cy-icon-2.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-cy-2.png'),
            },
            {
              name: '企业融资能力评估',
              desc: '综合评估企业融资能力，为企业融资和金融企业提供参考依据',
              icon: require('../../assets/img/home/nlzx-cy-icon-3.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-cy-3.jpeg'),
            },
            {
              name: '影视企业画像',
              desc: '对企业的规模实力、营收情况、社会责任、创新能力、企业风险、经营状况六个方面构建企业画像',
              icon: require('../../assets/img/home/nlzx-jc-icon-2.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-jc-2.jpeg'),
              url: 'https://hyt.dongyang.gov.cn/bigscreen/#/enterprisePortrait/enterpriseIndex'
            },
            {
              name: '企业经营风险预警',
              desc: '根据企业舆情信息、企业营收信息、企业投资项目风险信息等进行综合分析，实时预测企业经营风险',
              icon: require('../../assets/img/home/nlzx-cy-icon-4.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-cy-4.jpeg'),
              url: 'https://open.api.unotice.cn/api/goto/12602'
            },
            {
              name: '影视作品收入预测',
              desc: '对新作品进行口碑的预测评价和预测收入',
              icon: require('../../assets/img/home/nlzx-cy-icon-5.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-cy-5.jpeg'),
            }
          ]
        },
        // {
        //   name: '监管评价',
        //   enName: 'Supervision assessment',
        //   active: 0,
        //   value: 3,
        //   children: []
        // },
        {
          name: '决策赋能',
          enName: 'Decision enabling',
          active: 0,
          value: 4,
          children: [
            {
              name: '人才画像',
              desc: '展示人才基本信息，基于人才的学历、参演经历等分析人才商业价值、专业度等指数指标',
              icon: require('../../assets/img/home/nlzx-jc-icon-1.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-jc-1.png'),
              url: 'https://hyt.dongyang.gov.cn/hd/xhzy2/app/persona/person'
            },
            {
              name: '影视作品画像',
              desc: '对作品的商业价值、受众群体、营销平台、口碑分析、风险建工五个方面构建作品画像',
              icon: require('../../assets/img/home/nlzx-jc-icon-3.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-jc-3.png'),
              url: 'https://hyt.dongyang.gov.cn/hd/xhzy2/app/persona/works'
            },
            {
              name: '产业链图谱',
              desc: '构建影视制作、出品、发行等全产业链的全景图谱，图谱分解影视产业链上下游各环节，准确的反映出每个环节情况及相应的重点企业。',
              icon: require('../../assets/img/home/nlzx-jc-icon-4.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-jc-4.png'),
              url: 'https://hyt.dongyang.gov.cn/hd/xhzy2/app/industrial-chain?tab=picture'
            },
            {
              name: '招商目标分析筛选',
              desc: '调用相关算法模型，分析筛选合适的招商目标企业，对产业链进行强链补链',
              icon: require('../../assets/img/home/nlzx-jc-icon-5.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-jc-5.jpeg'),
            },
            {
              name: '影视舆情监测',
              desc: '采集互联网海量舆情信息，实现影视文化行业舆情的分析与预警',
              icon: require('../../assets/img/home/nlzx-jg-icon-2.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-jg-2.jpeg'),
              url: 'https://open.api.unotice.cn/api/goto/12602'
            },
            {
              name: '产业雷达',
              desc: '对产业运行情况和趋势进行预测，对产业风险进行预测预警，实现产业风险危机及时预知和提前布控',
              icon: require('../../assets/img/home/nlzx-jg-icon-3.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-jg-3.jpeg'),
            },
            {
              name: '影视文化产业指数',
              desc: '体现影视文化产业的生产力、吸引力、影响力、驱动力、国际性和趋势性',
              icon: require('../../assets/img/home/nlzx-jg-icon-4.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-jg-4.png'),
              url: 'https://hyt.dongyang.gov.cn/bigscreen/#/hdIndex'
            }
          ]
        },
        {
          name: '素材超市',
          enName: 'Materials Supermarket',
          active: 0,
          value: 5,
          children: [
            {
              name: '素材智能推荐',
              desc: '对影视企业、视频素材、图片素材、音乐素材等内容进行智能推荐',
              icon: require('../../assets/img/home/nlzx-jc-icon-1.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-sc-1.jpg'),
            },
            {
              name: '素材云服务',
              desc: '为影视素材提供云端存储、云端备份等云服务',
              icon: require('../../assets/img/home/nlzx-jc-icon-2.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-sc-2.png'),
            },
            {
              name: '素材版权保护',
              desc: '影视素材数据上链，为入驻影视素材超市的云上素材提供版权监测保护',
              icon: require('../../assets/img/home/nlzx-jc-icon-3.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-sc-3.jpg'),
            },
            {
              name: '素材转码',
              desc: '支持各种视音频格式之间的互转．并应用于主流视音频格式，提高格式转换的效率',
              icon: require('../../assets/img/home/nlzx-jc-icon-4.png'),
              imgUrl: require('../../assets/img/home/home-capacity-img-sc-4.jpeg'),
            },
          ]
        }
      ]
    }
  },
  setup() {
    let tabs = [
      {
        name: '大脑能力中心'
      },
      {
        name: '未来影视工厂服务中心'
      }
    ]
    // let menu =
    const jrList = [
      {
        url: require('../../assets/img/home/cyfw-jrfw-1.png')
      },
      {
        url: require('../../assets/img/home/cyfw-jrfw-2.png')
      },
      {
        url: require('../../assets/img/home/cyfw-jrfw-3.png')
      }
    ]
    return {tabs, jrList}
  },
  methods: {
    changeActive(index) {
      this.active = index
    },
    changeMenu(selector, index) {
      this.menuActive = index
      let anchor = this.$el.querySelector(selector)
      this.$refs.anchorBox.scrollTo({top : anchor.offsetTop, behavior : 'smooth'});
    },
    changeCardTabs(obj, index) {
      obj.active === index
    },
    scroll($event) {
      // console.log($event.target.scrollTop, $event.target.offsetHeight)
      let scrollTop = parseInt($event.target.scrollTop)
      let windowHeight = $event.target.clientHeight
      let scrollHeight = $event.target.scrollHeight
      // console.log(scrollTop,windowHeight,scrollHeight,'123')
      if(scrollTop + windowHeight === scrollHeight){
        this.menuActive = this.menu.length - 1
      } else {
        let active = 0
        this.menu.forEach((item, index) => {
          if (scrollTop >= this.$el.querySelector(`#anchor-${index}`).offsetTop) {
            active = index
          }
        })
        this.menuActive = active
      }
    },
    goOtherPage(url) {
      if (url) {
        window.open(url)
      }
    }
  },
}
</script>

<style scoped lang="less">
@height: 72px;
.tabs {
  height: @height;
  background: #FFFFFF;

  .tabs-box {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 1200px;
    height: 100%;
    margin: 0 auto;

    .tabs-item {
      position: relative;
      min-width: 200px;
      height: @height;
      line-height: @height;
      padding: 0 20px;
      font-size: 16px;
      color: #313233;
      letter-spacing: 0.96px;
      cursor: pointer;
      text-align: center;

      &:not(:first-child)::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -8px;
        width: 2px;
        height: 16px;
        background: #C8CACC;
      }

      &.active {
        position: relative;
        font-size: 20px;
        color: #3D2A24;
        letter-spacing: 1.2px;
        font-weight: 500;

        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          margin-left: -12px;
          width: 24px;
          height: 2px;
          background: #3D2A24;
        }
      }

    }
  }
}

.tabs-body {
  //height: 955px;
  //background: url("../../assets/img/nlzx-bg.png");
  background: #FAFAFA;

  .tabs-content {
    margin: 0 auto;
    width: 1200px;

    .center-title {
      padding-top: 40px;
      font-size: 32px;
      color: #313233;
      letter-spacing: 1.92px;
      font-weight: 500;

      span {
        margin: 0 10px;
        vertical-align: middle;
      }

      img {
        vertical-align: middle;
        width: 24px;
      }
    }

    .center-sub-title {
      margin-top: 10px;
      font-size: 16px;
      color: #B0B5B8;
      letter-spacing: 0.96px;
      text-align: center;
      font-weight: 400;
    }

    .capacity-box {
      display: flex;
      justify-content: left;
      margin-top: 30px;
      padding-bottom: 50px;

      @menu-height: 118px;

      .capacity-left {
        width: 168px;

        .capacity-menu {
          .capacity-menu-item {
            position: relative;
            height: @menu-height;
            background: #FFFFFF;
            cursor: pointer;
            text-align: center;

            .capacity-menu-item-icon {
              width: 75px;
            }

            &:hover {
              background: #FFF8EA;

              &::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 4px;
                height: 100%;
                background: #D8AE81;
              }
            }

            &.active {
              background: #FFF8EA;

              &::after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 4px;
                height: 100%;
                background: #D8AE81;
              }
            }
          }
        }
      }

      .capacity-right {
        height: @menu-height * 5;
        margin-left: 24px;
        flex: 1;
        text-align: left;
        overflow-y: auto;

        .anchor-box {
          position: relative;
        }

        .capacity-right-box {
          /*margin-bottom: 22px;*/
          background: #FFFFFF;
          border: 1px solid #DCDCDC;
          border-radius: 5px;
          .capacity-right-title {
            position: relative;
            height: 60px;
            line-height: 60px;
            margin: 0 20px;
            text-align: center;
            span {
              vertical-align: middle;
              font-size: 24px;
              font-weight: 500;
              color: #CB914D;
              letter-spacing: 1px;
            }

            .capacity-right-title-icon {
              width: 44px;
              vertical-align: middle;
            }

            //&::after {
            //  content: '';
            //  position: absolute;
            //  bottom: 0;
            //  left: 0;
            //  width: 100%;
            //  height: 1px;
            //  background: #DCDCDC;
            //}

            .capacity-right-title-en {
              margin-left: 20px;
              font-size: 16px;
              color: #B0B5B8;
              letter-spacing: 0.96px;
              font-weight: 400;
            }
          }

          .capacity-right-box-body {
            .capacity-right-tabs {
              display: flex;
              //flex-wrap: wrap;
              margin: 0 30px;
              border-bottom: 1px solid #E0E0E0;
            }

            .sub-item {
              position: relative;
              width: 16.66%;
              //margin-bottom: 16px;
              padding: 20px 0 0;
              background: #FFFFFF;
              cursor: pointer;
              text-align: center;

              &.active {
                background: #FFF7EB;
                border-bottom: 4px solid #CB914D;
                .sub-item-name {
                  color: #D19334;
                }
              }

              &:hover {
                background: #F5F5F5;
              }

              &.disabled {
                //cursor: not-allowed;

                .sub-item-icon {
                  filter: grayscale(100%);
                }
              }

              //&:not(:nth-child(3n + 3)) {
              //  margin-right: 16px;
              //}

              .sub-item-img {
                width: 100%;
              }

              .sub-item-icon {
                //width: 56px;
                //margin-top: 24px;
                text-align: center;
                img {
                  height: 60px;
                }
              }

              .sub-item-name {
                min-height: 44px;
                margin-top: 10px;
                text-align: center;
                font-size: 16px;
                color: #313233;
                line-height: 22px;
                letter-spacing: 1px;
              }

              .sub-item-desc {
                margin-top: 10px;
                font-size: 14px;
                font-weight: 400;
                color: #9D9D9D;
                line-height: 18px;
              }
            }

            .sub-item-content {
              width: 100%;
              display: flex;
              padding: 40px 30px;
              background: url("../../assets/img/home/home-capacity-bg.png") no-repeat center / 100%;

              .sub-item-content-img {
                width: 300px;
                img {
                  width: 100%;
                  border-radius: 10px;

                }
              }

              .sub-item-content-body {
                margin-left: 30px;
                flex: 1;
                padding: 30px;
                border: 1px solid #EBEBEB;
                border-radius: 10px;
                background: #FFFFFF;
                box-shadow: 0 0 10px 2px #EBEBEB ;

                .sub-item-content-name {
                  //width: 750px;
                  margin-bottom: 16px;
                  overflow: hidden;//溢出隐藏
                  white-space: nowrap;//禁止换行
                  text-overflow: ellipsis;//...
                  font-size: 24px;
                  color: #313233;

                }

                .sub-item-content-desc {
                  display: -webkit-box;//谷歌
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;//显示几行
                  overflow: hidden;
                  font-size: 16px;
                  color: #A5A5A5;
                  letter-spacing: 0.96px;
                }

                .sub-item-content-more {
                  margin-top: 18px;
                  font-size: 16px;
                  color: #B8946E;
                  letter-spacing: 0.96px;
                  cursor: pointer;
                }
              }
            }

            .sc-item {
              width: calc(25% - 10px);
              &:not(:nth-child(4n + 4)) {
                margin-right: 10px;
              }
              .sub-item-img {
                width: 100%;
              }

              .sub-item-content {
                //padding: 8px 0;
                padding: 8px 20px 20px;
                text-align: center;
                background: rgba(223,223,223,0.4);

                .sub-item-name {
                  font-size: 20px;
                  font-weight: 500;
                  color: #313233;
                  line-height: 28px;
                  letter-spacing: 1px;
                }
              }
            }
          }
        }
        .capacity-right-box + .capacity-right-box { margin-top: 22px;}
      }

      .CIS-box {
        width: 100%;
        height: @menu-height * 6;
        background: url("../../assets/img/home/nlzx-cy-bg.png") no-repeat center / contain;
      }

      .cy-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .cy-item {
          position: relative;
          width: 25%;
          padding: 40px 0;

          .cy-item-bg {
            position: relative;
            width: 172px;
            height: 172px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.00);
            border: 2px dashed rgba(216, 174, 129, 1);
            border-radius: 50%;

            .cy-item-round {
              margin: 6px;
              width: 156px;
              height: 156px;
              background-image: linear-gradient(to bottom, #FFF9EB 0%, #D8AE81 100%);
              border-radius: 50%;
              cursor: pointer;

              .cy-item-content {
                position: relative;
                width: 154px;
                height: 154px;
                //line-height: 154px;
                margin: 1px;
                background: #FFFFFF;
                border-radius: 50%;
                text-align: center;

                img {
                  margin-top: 46px;
                  width: 60px;
                }
              }
            }

            .pop-box {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 200px;
              background: #FFFFFF;
              border: 2px solid rgba(216, 174, 129, 1);
              border-radius: 0 16px 16px 16px;
              z-index: 99;

              .pop-header {
                height: 56px;
                line-height: 56px;
                background: #FFF8EA;
                border-radius: 0 16px 0 0;
                text-align: center;
                .pop-header-text {
                  vertical-align: middle;
                  font-size: 20px;
                  color: #313233;
                  letter-spacing: 1.2px;
                  font-weight: 400;
                }
                img {
                  margin-right: 10px;
                  height: 24px;
                  vertical-align: middle;
                }
              }

              .pop-body {
                padding: 15px;

                .menu-box {
                  .menu-item {
                    padding: 5px;
                    font-size: 16px;
                    color: #313233;
                    letter-spacing: 0.96px;
                    text-align: center;
                    font-weight: 400;
                    cursor: pointer;
                    &:hover {
                      color: #B8946E;
                    }
                  }
                }
              }
            }
          }

          .cy-item-name {
            margin-top: 10px;
            font-size: 16px;
            color: #313233;
            letter-spacing: 0.96px;
            text-align: center;
            font-weight: 400;
          }

          &:not(:nth-child(8n + 5)):not(:nth-child(8n + 1)):not(:first-child)::before {
            position: absolute;
            content: '';
            height: 0;
            width: calc(50% - 86px);
            top: 126px;
            left: 0;
            border-top: 2px dashed #D8AE81;
          }

          &:not(:nth-child(4n)):not(:last-child)::after {
            position: absolute;
            content: '';
            height: 0;
            width: calc(50% - 86px);
            top: 126px;
            right: 0;
            border-top: 2px dashed #D8AE81;
          }

          &.right {
            .cy-item-bg::after {
              position: absolute;
              content: url(../../assets/img/home/arrow-right.png);
              width: 20px;
              top: 74px;
              right: -80px;
              z-index: 9;
            }
          }

          &.left {
            .cy-item-bg::before {
              position: absolute;
              content: url(../../assets/img/home/arrow-left.png);
              width: 20px;
              top: 74px;
              left: -80px;
              z-index: 9;
            }
          }

          &.down {
            .cy-item-bg::after {
              position: absolute;
              content: url(../../assets/img/home/arrow-down.png);
              width: 20px;
              bottom: -76px;
              right: -75px;
              z-index: 9;
            }
          }

          &.third::after {
            position: absolute;
            content: '';
            height: 154px;
            width: calc(50% - 86px);
            top: 126px;
            right: 0;
            border-top: 2px dashed #D8AE81;
            border-right: 2px dashed #D8AE81;
            border-radius: 0 30px 0 0;
          }

          &.fourth::after {
            position: absolute;
            content: '';
            height: 154px;
            width: calc(50% - 86px);
            top: 126px;
            right: 0;
            border-top: 2px dashed #D8AE81;
            border-right: 2px dashed #D8AE81;
            border-radius: 0 30px 0 0;
          }

          //&.fifth::before {
          //  position: absolute;
          //  content: '';
          //  height: 154px;
          //  width: calc(50% - 86px);
          //  top: 126px;
          //  left: 0;
          //  border-top: 2px dashed #D8AE81;
          //  border-left: 2px dashed #D8AE81;
          //  border-radius: 30px 0 0 0;
          //}
          //
          &.eighth::after {
            position: absolute;
            content: '';
            height: 130px;
            width: calc(50% - 86px);
            top: 0;
            right: 0;
            border-bottom: 2px dashed #D8AE81;
            border-right: 2px dashed #D8AE81;
            border-radius: 0 0 30px 0;
          }

          //&.seventh::before {
          //  position: absolute;
          //  content: '';
          //  height: 130px;
          //  width: calc(50% - 86px);
          //  top: 0;
          //  left: 0;
          //  border-bottom: 2px dashed #D8AE81;
          //  border-left: 2px dashed #D8AE81;
          //  border-radius: 0 0 0 30px;
          //}

        }
      }
    }
    .tabs-content-breadcrumb {
      padding: 15px 0 30px;
      font-size: 18px;
    }

    .jr-content {
      padding-bottom: 40px;
      .jr-item {
        position: relative;
        margin-bottom: 30px;
        .jr-item-btn {
          position: absolute;
          left: 120px;
          bottom: 50px;
          width: 180px;
          height: 44px;
          line-height: 44px;
          background: rgba(255,255,255,0.4);
          border-radius: 50px;
          border: 1px solid #FFFFFF;
          text-align: center;
          color: #FFFFFF;
          font-size: 18px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
